<template>
  <list-page
      v-model:list="goodsList"
      :requestParams="{}"
      :requestMethod="init"
      :height="listHeight"
      ref="listPageRef"
  >
    <template #default>
      <slot name="header"></slot>
      <view class="u-m-l-20 u-m-r-30 u-m-t-30 u-m-b-20">
        <view class="flex-block" style="align-items: center;">
          <u-row align="center" class="p-r-10">
            <uni-icons customPrefix="iconfont" type="icon-discoverfill" :color="$u.color.contentColor" size="22px"></uni-icons>
            <up-text text="推荐" class="u-m-l-5"></up-text>
          </u-row>
        </view>
      </view>
      <up-waterfall v-model="goodsList" ref="uWaterfallRef" v-if="goodsList.length">
        <template v-slot:left="{leftList}">
          <view class="u-m-10" v-for="(item, index) in leftList" :key="index">
            <goods-item
              :data="item"
              type="vertical"
              size="calc(50vw - 10px)"
            ></goods-item>
          </view>
        </template>
        <template v-slot:right="{rightList}">
          <view class="u-m-10" v-for="(item, index) in rightList" :key="index">
            <goods-item
              :data="item"
              type="vertical"
              size="calc(50vw - 10px)"
            ></goods-item>
          </view>
        </template>
      </up-waterfall>
    </template>
  </list-page>
</template>

<script>
import goodsItem from '@/components/goods-item/goods-item.vue';
export default {
  components: {
    goodsItem
  },
  data() {
    return {
      goodsList: []
    }
  },
  computed: {
    listHeight() {
      return this.$u.getPx(this.$u.sys().windowHeight) - this.$u.getPx(this.$u.sys().safeAreaInsets.bottom) - 44
    }
  },
  mounted() {
    this.reset()
  },
  methods: {
    init(params) {
      return this.$api.goods.recommended(params)
    },
    reset() {
      this.$nextTick(() => {
        this.$refs.listPageRef.reset()
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.classify-content {
  width: 100%;
}
.left {
  width: 200rpx;
  height: 100%;
  border-right: 1rpx solid $u-border-color;
  overflow: scroll;
}
.right {
  flex: 1;
  height: 100%;
  padding: 0.1rpx;
  box-sizing: border-box;
}
.ad {
  // background: $u-main-color;
  color: $u-warning-dark;
  text-align: center;
}
</style>
<style lang="less" scoped>
#-theme() {
  fg: #ddd;
  bg: #222;
  gap: 0.25em;
}

.waterfall {
  @h:80px, 120px, 220px;
  @gcd:10px;
  @width:minmax(133px, 1fr);

  display:grid;
  grid-template-columns:repeat(auto-fill, @width);
  grid-gap:#-theme()[gap];
  grid-auto-flow:row dense;
  grid-auto-rows:@gcd;

  .item {
    width:100%;
    //background:#-theme[bg];
    //color:#-theme[fg];
  }

  //http://lesscss.org/functions/#list-functions-extract
  .item { grid-row:auto/span unit(extract(@h, 3) / @gcd) }
  .item.ad { grid-row:auto/span unit(extract(@h, 1) / @gcd) }
  //.item:nth-of-type(3n+3) { grid-row:auto/span unit(extract(@h, 3) / @gcd) }
}

.brickwall {
  @height:minmax(133px, 20vmin);

  display:grid;
  grid-gap:#-theme()[gap];
  grid-auto-flow:row dense;
  grid-auto-rows:@height;
  grid-template-columns:1fr;

  @media (min-width:512px) {
    @cr: 2 2 3
    2 3 2
    3 2 2;
    grid-template-columns:repeat(7, 1fr);
    #-f(length(@cr));
    @media (min-width:1024px) {
      @cr: 2 3 3 3 3
      3 3 3 3 2
      3 3 2 3 3;
      grid-template-columns:repeat(14, 1fr);
      #-f(length(@cr));
    }
  }

  .item {
    height:100%;
    background:#-theme()[bg];
    color:#-theme()[fg];
  }

  #-f(@l; @i:1) when (@i =< @l) {//http://lesscss.org/features/#mixins-feature-loops-feature
    #-f(@l; @i + 1);
    .item:nth-of-type(@{l}n + @{i}) {
      grid-column:auto/span extract(@cr, @i);
    }
  }
}
</style>